// pages/pay/index.js
new Vue({
    el: '#pay_app',
    delimiters: ['[[', ']]'], // 明确设置Vue.js的模板分隔符
    data: {
        message: '欢迎来到支付页面！',
        userInfo: null, // 用于存储从URL解析的用户信息
        orderInfo: null, // 订单信息，初始为null
        showPaymentSuccessModal: false // 控制支付成功弹窗的显示
    },
    mounted() {
        // 1. 尝试从 localStorage 读取用户信息
        const storedUserInfo = localStorage.getItem('wechatUserInfo');
        if (storedUserInfo) {
            this.userInfo = JSON.parse(storedUserInfo);
            console.log('从 localStorage 获取用户信息:', this.userInfo);
        }

        // 2. 如果 localStorage 中没有，或者需要更新，则从 URL 参数解析
        const userInfoFromUrl = this.parseUserInfoFromUrl();
        if (userInfoFromUrl) {
            this.userInfo = userInfoFromUrl;
            localStorage.setItem('wechatUserInfo', JSON.stringify(userInfoFromUrl));
            console.log('从 URL 获取并保存用户信息:', this.userInfo);
            // 清除URL中的用户信息参数，保持URL整洁
            window.history.replaceState({}, document.title, window.location.pathname);
        }

        if (!this.userInfo) {
            console.log('未检测到用户信息，请点击登录按钮进行微信授权。');
        }

        // 监听 localStorage 变化，实现多页面登录状态同步
        window.addEventListener('storage', this.handleStorageChange);

        // 3. 检查URL中是否有order_id，如果有则获取订单信息
        const params = new URLSearchParams(window.location.search);
        const orderId = params.get('order_id');
        if (orderId) {
            this.fetchOrderInfo(orderId);
            // 清除URL中的order_id参数，保持URL整洁
            window.history.replaceState({}, document.title, window.location.pathname);
        }
    },
    methods: {
        parseUserInfoFromUrl() {
            const params = new URLSearchParams(window.location.search);
            if (params.has('openid')) {
                const userInfo = {
                    openid: params.get('openid'),
                    nickname: decodeURIComponent(params.get('nickname') || ''),
                    headimgurl: params.get('headimgurl'),
                    sex: params.get('sex'),
                    province: decodeURIComponent(params.get('province') || ''),
                    city: decodeURIComponent(params.get('city') || ''),
                    country: decodeURIComponent(params.get('country') || '')
                };
                return userInfo;
            }
            return null;
        },
        handleStorageChange(event) {
            if (event.key === 'wechatUserInfo') {
                const newUserInfo = event.newValue ? JSON.parse(event.newValue) : null;
                if (JSON.stringify(this.userInfo) !== JSON.stringify(newUserInfo)) {
                    this.userInfo = newUserInfo;
                    console.log('Storage 变化，更新用户信息:', this.userInfo);
                }
            }
        },
        fetchOrderInfo(orderId) {
            // 实际应用中，这里会调用后端API来获取订单详情
            // 暂时模拟数据
            console.log(`正在获取订单ID为 ${orderId} 的信息...`);
            // 假设后端API为 /rzwl/api/order/{order_id}
            axios.get(`/rzwl/api/order/${orderId}`)
                .then(response => {
                    this.orderInfo = response.data;
                    console.log('订单信息获取成功:', this.orderInfo);
                })
                .catch(error => {
                    console.error('获取订单信息失败:', error.response ? error.response.data : error.message);
                    this.orderInfo = {
                        order_id: orderId,
                        training_class_name: '未知培训班',
                        price: '未知价格'
                    };
                    alert('获取订单信息失败，请稍后再试。');
                });
        },
        redirectToWechatAuth() {
            const redirectUri = encodeURIComponent(window.location.origin + '/rzwl/wechat/oauth_callback');
            const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.WECHAT_APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=pay#wechat_redirect`;
            window.location.href = authUrl;
        },
        initiatePayment() {
            if (!this.orderInfo || !this.userInfo || !this.userInfo.openid) {
                alert('订单信息或用户信息不完整，无法支付。');
                return;
            }

            console.log('发起支付请求:', this.orderInfo.order_id, this.userInfo.openid);

            // 获取客户端IP地址
            // 注意：在实际生产环境中，客户端IP应由后端从请求头中获取，
            // 因为前端获取的IP可能不准确或容易被伪造。
            // 这里为了演示，简单地使用一个占位符或尝试获取。
            const clientIp = '106.52.120.235'; // 替换为实际获取IP的逻辑，例如通过第三方API或后端传递

            axios.post('/rzwl/api/wxpay/unifiedorder', {
                order_id: this.orderInfo.order_id,
                openid: this.userInfo.openid,
                client_ip: clientIp
            })
            .then(response => {
                const payData = response.data;
                console.log('获取支付参数成功:', payData);

                if (typeof wx === 'undefined') {
                    alert('微信JS-SDK未加载，请检查网络或稍后再试。');
                    return;
                }

                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: payData.appId, // 必填，公众号的唯一标识
                    timestamp: payData.timeStamp, // 必填，生成签名的时间戳
                    nonceStr: payData.nonceStr, // 必填，生成签名的随机串
                    signature: payData.signature,// 必填，签名
                    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
                });

                wx.ready(() => {
                    wx.chooseWXPay({
                        timestamp: payData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的参数名是timeStamp而非timestamp, 这里casing不对会导致签名验证失败
                        nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位
                        package: payData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                        signType: payData.signType, // 微信支付V3的RSA签名方式，目前仅支持RSA
                        paySign: payData.paySign, // 支付签名
                        success: (res) => {
                            // 支付成功后的回调函数
                            if (res.errMsg == "chooseWXPay:ok") {
                                console.log('支付成功！', res);
                                this.showSuccessModal();
                            } else {
                                alert('支付失败，请稍后再试。');
                                console.error('支付失败:', res);
                            }
                        },
                        cancel: (res) => {
                            // 用户取消支付
                            alert('您已取消支付。');
                            console.log('支付取消:', res);
                        },
                        fail: (res) => {
                            // 支付失败
                            alert('支付失败，请稍后再试。');
                            console.error('支付失败:', res);
                        }
                    });
                });

                wx.error((res) => {
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，
                    // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
                    // 对于SPA页面，可以在这里进行签名重试。
                    console.error('微信JS-SDK配置失败:', res);
                    alert('微信JS-SDK配置失败，请刷新页面重试。');
                });

            })
            .catch(error => {
                console.error('获取支付参数失败:', error.response ? error.response.data : error.message);
                alert('获取支付参数失败，请稍后再试。');
            });
        },
        showSuccessModal() {
            this.showPaymentSuccessModal = true;
        },
        hideSuccessModal() {
            this.showPaymentSuccessModal = false;
            // 支付成功后跳转到“我的页面”的“已支付”tabsheet
            window.location.href = '/rzwl/me?tab=paid';
        },
        clearCacheAndReload() {
            if (confirm('确定要清理缓存并强制刷新页面吗？这可能解决一些显示问题。')) {
                window.location.reload(true);
            }
        },
        logout() {
            if (confirm('确定要登出吗？')) {
                localStorage.removeItem('wechatUserInfo');
                this.userInfo = null; // 清除当前Vue实例中的用户信息
                window.location.reload(true); // 强制刷新页面以反映登出状态
            }
        }
    },
    beforeDestroy() {
        // 移除事件监听器，防止内存泄漏
        window.removeEventListener('storage', this.handleStorageChange);
    }
});
